<template>
  <div>
    <!-- 默认表单弹窗 -->
    <el-dialog
      custom-class="popup-form"
      :visible.sync="show"
      :show-close="false"
      :close-on-click-modal="false"
      v-if="customTheme == 0"
    >
      <button
        type="button"
        class="el-dialog__headerbtn"
        @click="$emit('cancel')"
      >
        <i class="el-dialog__close el-icon el-icon-close"></i>
      </button>
      <div class="dialog6">
        <div class="form-box">
          <div class="title">
            <img :src="cover" class="title-img" v-show="cover" />
            <h3 class="title-h3">{{ title }}</h3>
          </div>
          <p class="text-imp">{{ desc }}</p>
          <el-input
            type="text"
            maxlength="11"
            :value="phone"
            @input="$emit('phoneChange', $event)"
            placeholder="请输入手机号码"
          ></el-input>
          <div class="sms-row" v-if="smsState">
            <el-input
              type="text"
              maxlength="6"
              v-model="code"
              placeholder="请输入验证码"
            ></el-input>
            <button
              type="button"
              class="getcode-btn"
              :disabled="codeDisabled"
              @click="getCode"
            >
              {{ codeText }}
            </button>
          </div>
          <div style="height: 15px"></div>
          <div class="btn-area">
            <button
              type="primary"
              class="btn btn-find"
              :disabled="disabled"
              @click="confirm"
            >
              {{ btnText }}
            </button>
          </div>
          <div class="tips">{{ tips }}</div>
        </div>
      </div>
    </el-dialog>
    <!-- 自定义背景弹窗 -->
    <el-dialog
      custom-class="popup-form popup-theme"
      :visible.sync="show"
      :show-close="false"
      :close-on-click-modal="false"
      v-if="customTheme == 1"
    >
      <button
        type="button"
        class="el-dialog__headerbtn"
        @click="$emit('cancel')"
      >
        <i class="el-dialog__close el-icon el-icon-close"></i>
      </button>
      <img :src="background" class="theme-bg" />
      <div class="theme-content" :class="contentClass">
        <h3 class="theme-title">“免费看房”看房专车</h3>
        <div class="theme-price">
          <strong>3000元</strong>
          <el-tooltip effect="dark" placement="bottom">
            <div slot="content">
              最终解释权归铺立租<br />创新科技有限公司所有
            </div>
            <span class="el-icon-info"></span>
          </el-tooltip>
        </div>
        <div class="theme-desc">叠加优惠</div>
        <div class="theme-form">
          <el-input
            type="text"
            maxlength="11"
            :value="phone"
            @input="$emit('phoneChange', $event)"
            placeholder="请输入手机号码"
          ></el-input>
          <div class="sms-row" v-if="smsState">
            <el-input
              type="text"
              maxlength="6"
              v-model="code"
              placeholder="请输入验证码"
            ></el-input>
            <button
              type="button"
              class="getcode-btn"
              :disabled="codeDisabled"
              :style="btnStyle"
              @click="getCode"
            >
              {{ codeText }}
            </button>
          </div>
          <div style="height: 15px"></div>
          <button
            type="primary"
            class="btn btn-find"
            :disabled="disabled"
            :class="btnClass"
            @click="confirm"
          >
            {{ btnText }}
          </button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import u from "@/plugins/Ccom";
export default {
  props: {
    // 显示隐藏
    show: {
      type: Boolean,
      default: false,
    },
    // 是否开启短信验证
    smsState: {
      type: Number,
      default: 0,
    },
    // 标题
    title: {
      type: String,
      default: "✖✖✖✖✖✖✖✖✖✖",
    },
    // 图标
    cover: {
      type: String,
      default:
        "https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20211112/465fe056f9ec4cce8ea86fb3d738436c.png",
    },
    // 描述
    desc: {
      type: String,
      default: "✖✖✖✖✖✖✖✖✖✖，带你优选最好楼盘~",
    },
    phone: {
      type: String,
      default: "",
    },
    // 按钮名
    btnText: {
      type: String,
      default: "确认",
    },
    // 备注
    tips: {
      type: String,
      default:
        "Tips：稍后将电话联系您，请保持手机通畅。为保障您的服务体验，通话过程将会有录音",
    },
    // 设定主题
    customTheme: {
      type: Number,
      default: 0,
    },
    // 主题背景
    background: {
      type: String,
      default:
        "https://mfgj.oss-cn-beijing.aliyuncs.com/upload/20211201/64014bdce75b4909a64e3b7c7436b718.png",
    },
    // 定位顶部距离
    contentClass: {
      type: String,
      default: "",
    },
    // 按钮样式
    btnClass: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      disabled: false,
      code: "", // 验证码
      codeText: "获取验证码",
      codeDisabled: false,
      loadTime: 60,
    };
  },
  updated() {
    if (this.show) {
      this.disabled = false;
    }
  },
  methods: {
    // 触发验证码
    getCode() {
      if (!this.phone) {
        this.$message({
          message: "请输入手机号码",
          type: "warning",
        });
        return false;
      }
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$message({
          message: "手机号格式有误",
          type: "warning",
        });
        return false;
      }
      var t = this.loadTime;
      this.codeDisabled = true;
      this.codeText = `${t}s重新获取`;
      var clearLoadTime = setInterval((e) => {
        t--;
        this.codeText = `${t}s重新获取`;
        if (t < 1) {
          clearInterval(clearLoadTime);
          t = this.loadTime;
          this.codeText = "重新获取";
          this.codeDisabled = false;
        }
      }, 1000);
      this.getLoginCode();
    },
    // 获取验证码
    getLoginCode() {
      u.http({
        client: true,
        url: "/app/sms/loginCode",
        params: {
          phone: this.phone,
          countryCode: "86",
        },
      }).then((res) => {
        if (res.code != 200) {
          this.$message({
            message: res.msg,
            type: "error",
          });
          return;
        }
      });
    },
    // 确认
    confirm() {
      this.disabled = true;
      if (!this.phone) {
        this.$message({
          message: "请输入手机号码",
          type: "warning",
        });
        return false;
      }
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$message({
          message: "手机号格式有误",
          type: "warning",
        });
        return false;
      }
      if (this.smsState) {
        if (!this.code) {
          this.$message({
            message: "请输入验证码",
            type: "warning",
          });
          return false;
        }
        // 验证登录
        u.http({
          client: true,
          url: "/app/user/login",
          params: {
            type: 2,
            phone: this.phone,
            code: this.code,
          },
        }).then((res) => {
          if (res.code == 200) {
            this.$emit("confirm");
            return false;
          }
          this.$message({
            message: res.msg,
            type: "error",
          });
        });
        return false;
      }
      this.$emit("confirm");
    },
  },
};
</script>